<template>
  <div class="loginBody">
    <div class="container">
      <form class="form" action="">
        <p class="title">登 录</p>
        <input v-model="loginName" placeholder="登录名" class="username input" type="text" />
        <input v-model="loginPwd" placeholder="密码" class="password input" type="password" />
        <button @click.prevent="login" class="btn" type="submit">Login</button>
      </form>
    </div>
  </div>
</template>

<script>
import LoginApi from '@/api/LoginApi';
import {
    mapMutations
} from 'vuex'
export default {
    data(){
        return {
            loginName:'',
            loginPwd:'',
        }
    },
    methods:{
        ...mapMutations('user',["SET_USERINFO"]),
        login(){
            LoginApi.login(this.loginName,this.loginPwd).then(res=>{
                sessionStorage.setItem('Token',res.data.jwt)
                this.SET_USERINFO(res.data.user)
                this.$router.replace('/home')
            })
        }
    }
};
</script>

<style scoped>
.loginBody{
    width:100vw;
    height:100vh;
    background: #212121;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
::selection {
  background-color: gray;
}

.container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(to bottom, #424242, #212121);
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5rem;
}

.title {
  color: wheat;
  margin: 3rem 0;
  font-size: 2rem;
}

.input {
  margin: 0.5rem 0;
  padding: 1rem 0.5rem;
  width: 20rem;
  background-color: inherit;
  color: wheat;
  border: none;
  outline: none;
}

.username {
  border-bottom: 1px solid wheat;
  transition: all 400ms;
}

.username:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}

.password {
  border-bottom: 1px solid wheat;
  transition: all 400ms;
}

.password:hover {
  background-color: #424242;
  border: none;
  border-radius: 0.5rem;
}

.btn {
  height: 3rem;
  width: 20rem;
  margin-top: 3rem;
  background-color: wheat;
  border-radius: 0.5rem;
  border: none;
  font-size: 1.2rem;
  transition: all 400ms;
  box-shadow: 0 0 10px antiquewhite, 0 0 10px antiquewhite;
}

.btn:hover {
  background-color: antiquewhite;
  box-shadow: none;
}
</style>